<template>
  <div class="main">
    <div>
      <router-view></router-view>
    </div>
    <van-tabbar
      v-model="index"
      active-color="#CC9145"
      inactive-color="#ccc"
      route
    >
      <van-tabbar-item
        v-for="(v, i) in tabbar"
        :key="i"
        :to="v.to"
        :badge="v.badge > 0 ? v.badge : ''"
      >
        <span>{{ v.title }}</span>
        <template #icon="props">
          <img :src="props.active ? v.icon.active : v.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Main",
  data() {
    return {
      index: 0,
    };
  },
  computed: {
    ...mapState(["shopCount", "loadShopCount"]),
    tabbar() {
      return [
        {
          title: "首页",
          icon: {
            active: require("../assets/images/home_active.png"),
            inactive: require("../assets/images/home.png"),
          },
          to: "/",
        },
        {
          title: "菜单",
          icon: {
            active: require("../assets/images/menu_active.png"),
            inactive: require("../assets/images/menu.png"),
          },
          to: "/menu",
        },
        {
          title: "购物",
          icon: {
            active: require("../assets/images/shopCar_active.png"),
            inactive: require("../assets/images/shopCar.png"),
          },
          badge: this.shopCount,
          to: "/shopcar",
        },
        {
          title: "个人",
          icon: {
            active: require("../assets/images/personal_active.png"),
            inactive: require("../assets/images/personal.png"),
          },
          to: { name: "Personal" },
        },
      ];
    },
  },
  methods: {
    ...mapMutations(["changeShopCount", "changeLoadShopCount"]),
    getShopCount() {
      if (this.loadShopCount) {
        return;
      }

      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "GET",
        url: "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getShopcartCount ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            return;
          }

          if (res.data.code === 8000) {
            this.changeShopCount(res.data.result);
            this.changeLoadShopCount(true);
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
  created() {
    // console.log(this.shopCount);
    this.getShopCount();
  },
};
</script>

<style lang="less" scoped>
.main {
  // padding-bottom: 50px;
  .van-tabbar {
    background-color: #f1fced;
    .van-tabbar-item--active {
      background-color: #f1fced;
    }
  }
  /deep/ .van-info {
    background-color: #cc9145;
  }
}
</style>